<template>
  <div class="app-container">
    <Pagetitle
      :title="pageTitle.title"
      :name="pageTitle.name"
      :btnName="pageTitle.btnName"
      @btnFun="btnFun"
    ></Pagetitle>
    <div class="filter-container">

    </div>
    <div class="table-container">
      <Table
        stripe
        :loading="dataTable.loading"
        :border="dataTable.border"
        :columns="dataTable.columns"
        :data="dataTable.data"
      >
        <template
          slot-scope="{row,index}"
          slot="score"
        >

          <span v-if="!row.$isEdit">
            {{row.score}}
          </span>
          <Input
            v-model="row.score"
            placeholder="请输入分值"
            @on-change="getInputValue"
            v-else
          ></Input>
        </template>
        <template
          slot-scope="{row,index}"
          slot="action"
        >
          <div
            class="btn-table-box"
            v-if="!row.$isEdit"
          >
            <div
              class="btn-text-blue"
              @click="handleEdit(row)"
            >编辑</div>

          </div>
          <div
            class="btn-table-box"
            v-else
          >
            <div
              class="btn-text-blue"
              @click="handleCanle(row)"
            >取消</div>
            <div
              class="btn-text-blue"
              @click="handleSave(row)"
            >保存</div>
          </div>
        </template>
      </Table>

      <Row class="mtop20">
        <Col
          :md="4"
          class="flex-start-center height-30 page"
        >
        <div>
          共{{count}}条
          <Select
            v-model="limit"
            size="small"
            class="lz-select-width"
            @on-change="changePageSize(1)"
          >
            <Option
              v-for="item in pageSizeSeletc"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}</Option>
          </Select>
        </div>
        </Col>
        <Col
          :md="12"
          class="flex-center-center height-30"
        >
        <Page
          v-if="pageshow"
          :total="count"
          :page-size="limit"
          @on-change="changePageSize"
          size="small"
          show-elevator
        />
        </Col>
        <Col :md="8">

        </Col>
      </Row>
    </div>

    <Modal
      v-model="addCostModal"
      :closable="false"
      :footer-hide="true"
    >
      <div class="modal-content">
        <Form
          ref="addCostForm"
          :model="addCostForm"
          :rules="ruleValidate"
          :label-width="80"
        >
          <div class="modal-header">
            <span>新增成本中心</span>
            <a @click="closeModal('addCostForm')">
              <svg-icon icon-class="close" />
            </a>
          </div>
          <div class="modal-body">
            <Row>
              <Col
                :span="12"
                offset="6"
              >

              <FormItem
                label="成本中心"
                prop="costCenterName"
              >
                <Input
                  v-model="addCostForm.costCenterName"
                  placeholder="请输入名称"
                ></Input>
              </FormItem>
              </Col>
            </Row>
          </div>
          <div class="modal-footer">
            <Button @click="closeModal('addCostForm')">取消</Button>
            <Button
              type="primary"
              @click="handleSubmitAddCost('addCostForm')"
            >确定</Button>
          </div>
        </Form>
      </div>
    </Modal>

    <Modal
      v-model="editorCostModal"
      :closable="false"
      :footer-hide="true"
    >
      <div class="modal-content">
        <Form
          ref="editorCostForm"
          :model="editorCostForm"
          :rules="ruleValidate"
          :label-width="80"
        >
          <div class="modal-header">
            <span>编辑成本中心</span>
            <a @click="closeModal('editorCostForm')">
              <svg-icon icon-class="close" />
            </a>
          </div>
          <div class="modal-body">
            <div class="brand-name">品牌：{{editorCostForm.costCenterName}}</div>
            <CheckboxGroup v-model="editorCostForm.costCenterIdList">
              <template v-for="cost in costList">
                <Checkbox
                  class="cost-checkbox"
                  :label="cost.id"
                  :key="cost.id"
                  :disabled="disableCostChecked.indexOf(cost.id) !== -1"
                >{{cost.costCenterName}}</Checkbox>
              </template>
            </CheckboxGroup>
          </div>
          <div class="modal-footer">
            <Button @click="closeModal('editorCostForm')">取消</Button>
            <Button
              type="primary"
              @click="handleSubmitEditorCost('editorCostForm')"
            >确定</Button>
          </div>
        </Form>
      </div>
    </Modal>

  </div>
</template>
<script>
import {
  fetchCostList,
  fetchAddCostCenter,
  fetchEditorCostCenter,
  fetchCostBrandList
} from "@/api/table";
import { Pagetitle } from "@/components";
export default {
  data() {
    return {
      modal4: true,
      pageshow: true,
      //总页码
      count: 0,
      //页码
      currentPage: 1,
      //总条数
      limit: 10,
      pageSizeSeletc: [
        {
          value: 10,
          label: "10条/页"
        },
        {
          value: 20,
          label: "20条/页"
        }
      ],
      pageTitle: {
        title: "成本中心管理",
        name: "新增成本中心",
        btnName: "btnFun"
      },
      dataTable: {
        loading: false,
        border: false,
        columns: [
          {
            minWidth: 100,
            title: "品牌",
            key: "brandName"
          },
          {
            minWidth: 200,
            title: "成本中心",
            key: "costCenterDoList",
            render: (h, params) => {
              const arr = params.row.costCenterDoList;
              let newArr = [];
              arr.forEach(item => {
                newArr.push(h("span", item.costCenterName + " "));
              });
              return h("span", newArr);
            }
          },
          {
            minWidth: 100,
            title: "操作",
            key: "action",
            render: (h, params) => {
              return h(
                "Button",
                {
                  props: {
                    type: "text",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.showEditorCostModal(params.row);
                    }
                  }
                },
                "编辑"
              );
            }
          }
        ],
        data: []
      },
      addCostModal: false,
      editorCostModal: false,
      costList: [],
      disableCostChecked: [],
      addCostForm: {
        costCenterName: ""
      },
      editorCostForm: {
        costCenterName: "",
        brandId: "",
        costCenterIdList: []
      },
      ruleValidate: {
        costCenterName: [
          {
            required: true,
            message: "填写名称",
            trigger: "blur"
          }
        ]
      }
    };
  },
  components: {
    Pagetitle
  },
  mounted() {
    this.getCostBrandList();
  },
  methods: {
    //分页
    changePageSize(index) {
      this.currentPage = index;
      this.getCostBrandList();
    },
    async getCostBrandList() {
      this.dataTable.loading = true;
      const res = await fetchCostBrandList({
        pageNo: this.currentPage,
        pageSize: this.limit
      });
      this.dataTable.loading = false;
      this.count = res.data.total;
      this.dataTable.data = [];
      res.data.list.forEach(item => {
        const data = {};
        data.brandId = item.brandId;
        data.brandName = item.brandName;
        data.costCenterDoList = item.costCenterDoList;
        this.dataTable.data.push(data);
      });
    },
    async addCostCenter(name) {
      await fetchAddCostCenter({
        costCenterName: this.addCostForm.costCenterName
      });
      this.getCostBrandList();
      this.closeModal(name);
      this.$Message.success("添加成功");
    },
    async getCostList() {
      const res = await fetchCostList();
      this.costList = [];
      res.data.forEach(item => {
        const data = {};
        data.costCenterName = item.costCenterName;
        data.id = item.id;
        this.costList.push(data);
      });
    },
    async editorCostCenter() {
      await fetchEditorCostCenter({
        brandId: this.editorCostForm.brandId,
        costCenterIdList: this.editorCostForm.costCenterIdList
      });
      this.editorCostModal = false;
      this.$Message.success("添加成功");
      this.getCostBrandList();
    },
    btnFun() {
      this.addCostModal = true;
    },
    go(url) {
      this.$router.push({
        path: url
      });
    },
    resetForm(name) {
      this.$refs[name].resetFields();
    },
    showEditorCostModal(row) {
      this.editorCostForm.costCenterIdList = [];
      this.disableCostChecked = [];
      row.costCenterDoList.forEach(item => {
        const data = {};
        data.id = item.id;
        this.editorCostForm.costCenterIdList.push(data.id);
        this.disableCostChecked.push(data.id);
      });
      this.getCostList();
      this.editorCostForm.costCenterName = row.brandName;
      this.editorCostForm.brandId = row.brandId;
      this.editorCostModal = true;
    },
    closeModal(name) {
      this.resetForm(name);
      this.addCostModal = false;
      this.editorCostModal = false;
    },
    handleSubmitAddCost(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.addCostCenter(name);
        }
      });
    },
    handleSubmitEditorCost() {
      this.editorCostCenter();
    }
  }
};
</script>
<style lang="less" scoped>
@import "~@/styles/mixin";
.brand-name {
  color: @primary-color;
  font-size: 14px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
}
.cost-checkbox {
  margin: 10px 20px 10px 0;
}
</style>
<style >
.ivu-input-icon + .ivu-input {
  padding-right: 7px;
}
</style>